import React, { PureComponent } from 'react'
import {
  BackHandler,
  Animated,
  Easing,
  StatusBar,
  Platform,
} from 'react-native'
import {
  createStackNavigator,
  createBottomTabNavigator,
  NavigationActions,
  createAppContainer,
} from 'react-navigation'
import {
  reduxifyNavigator,
  createReactNavigationReduxMiddleware,
  createNavigationReducer,
} from 'react-navigation-redux-helpers'
import { connect } from 'react-redux'
import RouterConfig from './configs/RouterConfig'
import Loading from './containers/Loading'
import * as Color from './configs/Color'
import { unitWidth, textSize24 } from './utils/AdapterUtil'

//选项卡
const HomeNavigator = createBottomTabNavigator({
  Trade: { screen: RouterConfig.Trade.screen },
  Account: { screen: RouterConfig.Account.scene },                 //个人中心
}, {
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  animationEnabled: false,
  lazy: false,
  tabBarOptions: {
    activeTintColor: Color.tabColor,
    inactiveTintColor: Color.tabColorActive,
    showIcon: true,
    style: {
      backgroundColor: Color.tabBarBackgroundColor,
      height: unitWidth * 124,
      justifyContent: 'center',
      alignItems: 'center',
     
    },
    tabStyle:{
      borderWidth: unitWidth * 1,
      borderColor:'yellow'
    },
    labelStyle: {
      color: '#FFFFFF',
      fontFamily: 'FZLTCXHJW--GB1-0',
      fontSize: textSize24,
      fontStyle: 'normal',
      fontWeight: 'bold',
      textAlign: 'center'
    },
    iconStyle: {
      width: unitWidth * 39,
      height: unitWidth * 39
    }
  },
})

HomeNavigator.navigationOptions = ({ navigation }) => {
  const { routeName } = navigation.state.routes[navigation.state.index]

  return {
    headerTitle: routeName,
  }
}

//创建配置清单文件
const AppNavigator = createStackNavigator(
  {
    Menu:{screen:RouterConfig.Menu.screen },
    ShopCart:{screen:RouterConfig.ShopCart.screen},
    HomeNavigator: { screen: HomeNavigator },
    Login: { screen: RouterConfig.Login.scene },
  },
  {
    headerMode: 'none',//headerMode: 'float',  标题模式
    mode: 'modal',
    navigationOptions: {
      gesturesEnabled: false,
    },
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing,
      },
      screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps
        const { index } = scene

        const height = layout.initHeight
        const translateY = position.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [height, 0, 0],
        })

        const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1],
        })

        return { opacity, transform: [{ translateY }] }
      },
    }),
  }
)
const AppContainer = createAppContainer(AppNavigator)

export const routerReducer = createNavigationReducer(AppContainer)

export const routerMiddleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.router
)

const App = reduxifyNavigator(AppNavigator, 'root')

function getActiveRouteName(navigationState) {
  if (!navigationState) {
    return null
  }
  const route = navigationState.routes[navigationState.index]
  if (route.routes) {
    return getActiveRouteName(route)
  }
  return route.routeName
}

@connect(({ app, router }) => ({ app, router }))
class Router extends PureComponent {

  constructor(props) {
    super(props)
    // 设置通知栏样式
    StatusBar.setBarStyle('light-content')
    StatusBar.setTranslucent(true)
    StatusBar.setBackgroundColor('transparent')
  }
  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backHandle)
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.backHandle)
  }

  backHandle = () => {
    const currentScreen = getActiveRouteName(this.props.router)
    if (currentScreen === 'Login') {
      return true
    }
    if (currentScreen !== 'Home') {
      this.props.dispatch(NavigationActions.back())
      return true
    }
    return false
  }

  render() {
    const { app, dispatch, router } = this.props
    if (app.loading) return <Loading />

    return <AppContainer dispatch={dispatch} state={router} />
  }
}

export default Router
